<template>
  <div>
    <div id="components-form-demo-advanced-search">
      <a-row :gutter="24" style="margin-bottom: 15px">
        <a-col :span="6">
          客服：
          <a-select
            show-search
            option-filter-prop="children"
            style="width: 60%"
            :filter-option="filterOption"
            v-model="searchData.csdTeamId"
          >
            <a-select-option
              :value="item.key"
              v-for="item in teamList"
              :key="item.key"
              :titles="item.title"
            >
              {{ item.teamName }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          客户编号：
          <a-select
            show-search
            option-filter-prop="children"
            style="width: 60%"
            :filter-option="filterOption"
            v-model="searchData.tenantId"
          >
            <a-select-option
              :value="item.tenantId"
              v-for="item in accArray"
              :key="item.id"
              :titles="item.title"
            >
              {{ item.companyName + "/" + item.tenantId }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          仓库名称：<a-select
            show-search
            option-filter-prop="children"
            style="width: 60%"
            :filter-option="filterOption"
            v-model="searchData.warehouseId"
            allowClear
          >
            <a-select-option
              :value="item.warehouseId"
              v-for="item in warehouse"
              :key="item.warehouseId"
            >
              {{ item.titleName }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          <div v-show="!expand">
            <a-button type="primary" class="searchBtn" @click="searchDate">
              查询
            </a-button>
            <a-button
              style="margin: 0 10px"
              type="primary"
              class="searchBtn"
              @click="resetSearch"
            >
              重置
            </a-button>
            <a
              :style="{ marginRight: '8px', fontSize: '14px' }"
              @click="expand = !expand"
            >
              {{ expand ? "折叠" : "展开" }}
              <a-icon :type="expand ? 'up' : 'down'" />
            </a>
          </div>
          <div v-show="expand">
            结算币种：
            <a-select
              show-search
              option-filter-prop="children"
              v-model="searchData.currency"
              allowClear
              style="width: 60%"
              @change="changeCurrency"
              placeholder="结算币种"
            >
              <a-select-option
                :name="item.exchangeCurrency"
                :value="item.sysCurrencyId"
                v-for="item in settlementCurrencys"
                :key="item.sysCurrencyId"
              >
                {{ item.exchangeCurrency }}
              </a-select-option>
            </a-select>
          </div>
        </a-col>
      </a-row>
      <a-row :gutter="24" v-show="expand">
        <a-col :span="6">
          时间：<a-range-picker
            v-model="clearingTime"
            @change="onReceiveDataChange"
            style="width: 60%"
          />
        </a-col>
        <a-col :span="6">
          <div v-show="expand">
            <a-button type="primary" class="searchBtn" @click="searchDate">
              查询
            </a-button>
            <a-button
              style="margin: 0 10px"
              type="primary"
              class="searchBtn"
              @click="resetSearch"
            >
              重置
            </a-button>
            <a
              :style="{ marginRight: '8px', fontSize: '14px' }"
              @click="expand = !expand"
            >
              {{ expand ? "折叠" : "展开" }}
              <a-icon :type="expand ? 'up' : 'down'" />
            </a>
          </div>
        </a-col>
        <a-col :span="6"> </a-col>
        <a-col :span="6"> </a-col>
      </a-row>
    </div>
    <p style="margin-top: 15px">
      <a-button
        @click="searchBtn('1')"
        :style="
          searchData.dateType === '1'
            ? 'color: #61ba8f;border-color: #61ba8f;border: 1px solid #61ba8f'
            : 'color: #626262;border-color: #fff;border: 1px solid #ccc'
        "
        style="margin: 0 5px"
        size="small"
        >昨日</a-button
      >
      <a-button
        @click="searchBtn('2')"
        :style="
          searchData.dateType === '2'
            ? 'color: #61ba8f;border-color: #61ba8f;border: 1px solid #61ba8f'
            : 'color: #626262;border-color: #fff;border: 1px solid #ccc'
        "
        style="margin: 0 5px"
        size="small"
        >上周</a-button
      >
      <a-button
        @click="searchBtn('3')"
        :style="
          searchData.dateType === '3'
            ? 'color: #61ba8f;border-color: #61ba8f;border: 1px solid #61ba8f'
            : 'color: #626262;border-color: #fff;border: 1px solid #ccc'
        "
        style="margin: 0 5px"
        size="small"
        >上月</a-button
      >
    </p>
    <div>
      <a-button
        type="primary"
        class="blueBtn"
        @click="DownloadExcel"
        style="
          background: #66b1ff;
          color: #fff;
          border: none;
          margin-left: 8px;
          margin-bottom: 10px;
        "
      >
        导出Excel文档
      </a-button>
    </div>
    <!-- 表格 -->
    <a-spin tip="Loading..." :spinning="spinning">
      <GeneralReportTable
        :getGeneralReport="getGeneralReport"
        :transferTableData="transferTableData"
        :monSum="monSum"
      />

      <!-- 分页器 -->
      <div style="margin: 20px 0; text-align: center">
        <a-config-provider>
          <a-pagination
            :current="searchData.current"
            show-size-changer
            :pageSizeOptions="['10', '20', '30']"
            :show-total="
              (total) => `${$t('m.page.Total')} ${total} ${$t('m.page.items')}`
            "
            @showSizeChange="showChange"
            :buildOptionText="
              (props) =>
                ` ${props.value} ${$t('m.page.a')}/${$t('m.page.page')}`
            "
            show-quick-jumper
            :default-current="searchData.current"
            :total="total"
            @change="onChangePage"
          />
        </a-config-provider>
      </div>
    </a-spin>
  </div>
</template>

<script>
import req from "@/utils/req";
import { mapState } from "vuex";
import GeneralReportTable from "@/components/system/FinanceManagement/GeneralReportTable";
import { logi_getCurrency } from "@/apis/system/setManage/setWarehouse";
import {
  finance_generalReport,
  team_searCh,
  excelFinance_total,
} from "@/apis/system/FinanceManagement/FinanceManagement.js";
export default {
  components: {
    GeneralReportTable,
  },
  created() {
    this.getGeneralReport();
    //获取币种
    this.getCurrency();
    this.getTeamList();
  },
  data() {
    return {
      activeKey: "1",
      spinning: false,
      monSum: {},
      searchData: {
        current: 1,
        size: 10,
        dateType: 0,
        csdTeamId: undefined,
        tenantId: null,
        warehouseId: null,
        currency: "USD",
        endtDate: null,
        startDate: null,
      },
      expand: false,
      receiveData: null,
      clearingTime: null,
      total: 1,
      transferTableData: [],
      settlementCurrencys: [],
      teamList: [],
    };
  },
  methods: {
    //导出文档
    async DownloadExcel() {
      this.searchData.current = null;
      this.searchData.size = null;
      let res = await excelFinance_total(this.searchData);
      req.exportFile("财务总报表", res);
    },
    //查询客服组下拉
    async getTeamList() {
      let res = await team_searCh();
      if (res.code == "200") {
        this.teamList = res.responseBody;
      }
    },
    //改变币种选择
    changeCurrency(value, option) {
      this.searchData.currency = value;
      if (option) {
        this.searchData.currency = option.data.attrs.name;
      }
    },
    //三个日期条件查询
    searchBtn(flag) {
      this.searchDate.current = 1;
      this.searchData.dateType = flag;
      this.getGeneralReport();
    },
    //搜索按钮
    searchDate() {
      this.getGeneralReport();
    },
    //重置按钮
    resetSearch() {
      this.searchData.current = 1;
      this.searchData.dateType = 0;
      this.searchData.tenantId = null;
      this.searchData.warehouseId = null;
      this.searchData.currency = "USD";
      this.searchData.endtDate = null;
      this.searchData.csdTeamId = undefined;
      this.searchData.startDate = null;
      this.clearingTime = null;
      this.getGeneralReport();
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    //分页器事件
    onChangePage(pageNumber) {
      this.searchData.current = pageNumber;
      this.getGeneralReport();
    },
    //页码变更
    showChange(size, current) {
      this.searchData.current = size;
      this.searchData.size = current;
      this.getGeneralReport();
    },
    //时间查询
    onReceiveDataChange(date, dateString) {
      this.searchData.dateType = null;
      this.searchData.startDate = dateString[0];
      this.searchData.endtDate = dateString[1];
    },

    //入库结算列表
    async getGeneralReport() {
      this.spinning = true;
      let { code, responseBody } = await finance_generalReport(this.searchData);
      if (code === "200") {
        this.transferTableData = responseBody.page.records;
        if (responseBody.sum) {
          this.monSum = responseBody.sum;
        } else {
          this.monSum = {};
        }
        this.total = responseBody.page.total * 1;
        this.searchData.size = responseBody.page.size * 1;
        this.spinning = false;
      }
    },
    //获取币种的接口
    async getCurrency() {
      let res = await logi_getCurrency({ size: 100000, current: 1 });
      if (res.code == "200") {
        this.settlementCurrencys = res.responseBody.records;
      }
    },
  },
  computed: {
    ...mapState(["accArray"]),
    ...mapState(["warehouse"]),
  },
};
</script>

<style lang="less" scoped>
.searchBtn {
  background: #fff;
  color: #3eae7c;
  text-shadow: none;
}
.searchBtn:hover {
  background: #3eae7c;
  color: #fff;
}
</style>
